<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { ref, inject, type Ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute()
const http: any = inject('http');

interface IDataModal {
    id: string;
    title: string;
    author: string;
    content: string;
    cover: string;
    type: number;
    status: number;
    createTime: string;
    cDate: string;
}
interface IResultModal {
    code: number;
    data: IDataModal[];
    msg: string;
}

const loading: Ref<boolean> = ref(true);
const content: Ref<IDataModal | null> = ref(null);
const centerDialogVisible = ref(false);
const token = ref(window.localStorage.getItem('token') || '');
const getData = () => {
    http.post('/api/article/getArticle', {
        id: route.query.id
    }).then((res: IResultModal) => {
        loading.value = false;
        if (res.code === 1) {
            content.value = res.data[0];
        }
    })
}
const setRecentReadingHandle = () => {
    http.post('/api/article/setRecentReading', {
        id: route.query.id,
        recentReadingTime: Date.now()
    }).then((res: any) => {
        console.log(res);
    })
}
const goToEdit = () => {
    router.push({
        path: '/edit',
        query: {
            id: route.query.id,
            type: 'edit'
        }
    })
}
const deleteArticle = () => {
    http.post('/api/article/deleteArticle', {
        id: route.query.id,
    }).then((res: any) => {
        ElMessage({
            showClose: true,
            message: res.msg,
            type: 'success',
        })
        setTimeout(() => {
            router.push({
                path: '/blog'
            })
        }, 1000)

    })
}
onMounted(() => {
    getData();
    setRecentReadingHandle();
})
</script>
<template>
    <div class="articleContent">
        <div class="header">
            <div class="back" @click="router.go(-1)">
                返回
                <el-icon size="24">
                    <ArrowRight />
                </el-icon>
            </div>
            <div class="func">
                <el-button v-if="token" type="primary" size="large" @click="goToEdit">编辑</el-button>
                <el-button v-if="token" size="large" type="danger" @click="centerDialogVisible = true">删除</el-button>
            </div>
        </div>
        <div class="article">
            <h2 class="title">{{ content?.title }}</h2>
            <div class="introduction">
                <span class="name">{{ content?.author }}</span>
                <span class="createTime">{{ content?.cDate }}</span>
            </div>
            <div class="content" v-html="content?.content">

            </div>
        </div>
        <div class="comment"></div>
        <el-dialog v-model="centerDialogVisible" title="删除文章" width="30%" align-center :close-on-click-modal="false">
            <span>是否删除此篇文章</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="deleteArticle">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<style scoped>
.articleContent {
    width: 100%;
}

.articleContent .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
}

.articleContent .header .back {
    line-height: 100%;
    padding: 10px 0;
    display: flex;
    align-items: center;
    font-size: 17px;
    color: #409eff;
}

.articleContent .article {
    box-sizing: border-box;
    width: 100%;
    border-radius: 4px 4px 0 0;
    padding: 2.667rem;
    border: 1px solid #e4e7ed;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}

.articleContent .article .title {
    margin: 0 0 1.3rem;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.31;
}

.articleContent .article .introduction {
    display: flex;
    min-width: 0;
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.articleContent .article .introduction .name {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 400;
    /* color: #515767; */
    line-height: 22px;
    margin-right: 15px;
}

.articleContent .article .introduction .createTime {
    /* color: #8a919f; */
    font-size: 14px;
}
</style>